<script setup>

import {ArrowUp, Plus, Close, More, DArrowLeft} from "@element-plus/icons-vue";
import {defineProps, ref} from "vue";
// import FormCountTagNormal from "@/components/WordFormedTag/FormCountTagNormal.vue";
import FormsCountsSelect from "@/components/FormsCountsSelect.vue";
import tableExample from "@/testCompGroupC/subTest/table-example.vue";
let props = defineProps(["mode"])
let moreShowing = ref(false);


const size = ref(20)

//
//
// const value = ref('')
// const options = [
//     {
//         label: 'v',
//         options: [
//             {
//                 value: 'v.1',
//                 label: 'v.1',
//             },
//             {
//                 value: 'v.2',
//                 label: 'v.2',
//             },
//         ],
//     },
//     {
//         label: 'n',
//         options: [
//             {
//                 value: 'n.1',
//                 label: 'n.1',
//             },
//             {
//                 value: 'n.2',
//                 label: 'n.2',
//             },
//             {
//                 value: 'n.3',
//                 label: 'n.3',
//             },
//             {
//                 value: 'n.4',
//                 label: 'n.4',
//             },
//         ],
//     },
//     {
//         label: 'n.idioms',
//         options: [
//             {
//                 value: 'n.idioms.1',
//                 label: 'n.idioms.1',
//             },
//             {
//                 value: 'n.idioms.2',
//                 label: 'n.idioms.2',
//             },
//             {
//                 value: 'n.idioms.3',
//                 label: 'n.idioms.3',
//             },
//         ],
//     },
// ]

let outerModel = ref([]);
</script>

<template>
    <div>
        <tableExample></tableExample>
    </div>
    <br/>
    <br/>
    <br/>
    <div>
        <span class="my-tagbuttons-group" v-if="!mode||mode===`1`">
            <el-tag class="my-tagbuttons-ele">previously arranged a series</el-tag>
            <button :icon="Plus" class="my-tagbuttons-ele"> <el-icon><Close/></el-icon></button><button
                class="my-tagbuttons-ele"><el-icon><Plus/></el-icon></button><button
                class="my-tagbuttons-ele">E</button>
        </span>
        <el-tag v-else class="my-tagbuttons-ele tag-single">previously arranged a series</el-tag>

        <el-tag class="my-tagbuttons-ele tag-single">previously arranged a series</el-tag>

    </div>
    <div v-if="moreShowing">
        <el-tag class="my-tagbuttons-ele tag-single small stickTop">previously arranged</el-tag>
        <el-tag class="my-tagbuttons-ele tag-single small stickTop">a series</el-tag>
        <button class="my-tagbuttons-ele button-single stickTop" @click="moreShowing = false">
            <el-icon>
                <DArrowLeft/>
            </el-icon>
        </button>
        <!--        <button class="my-tagbuttons-ele button-single more"><el-icon><More /></el-icon></button>-->
    </div>
    <div>
        <button v-if="!moreShowing" class="my-tagbuttons-ele button-single stickTop" @click="moreShowing = true">
            <el-icon>
                <More/>
            </el-icon>
        </button>
        <!--        <el-tag class="my-tagbuttons-ele tag-single small hide"></el-tag>-->
    </div>

    <br/>
    <br/>

<!--    outerModel:{{outerModel}}-->
<!--    <br/>-->
    <FormsCountsSelect v-model="outerModel"></FormsCountsSelect>
<!--    <div>-->
<!--        <el-select v-model="value" placeholder="Select"-->
<!--                   multiple-->
<!--                   filterable-->
<!--                   allow-create-->
<!--                   default-first-option-->
<!--                   :reserve-keyword="false"-->
<!--                   style="width: 240px">-->
<!--            <el-option-group-->
<!--                v-for="group in options"-->
<!--                :key="group.label"-->
<!--                :label="group.label"-->
<!--            >-->
<!--                <el-option-->
<!--                    v-for="item in group.options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value">-->
<!--                    <FormCountTagNormal :label="item.label"></FormCountTagNormal>-->
<!--                </el-option>-->
<!--            </el-option-group>-->
<!--        </el-select>-->
<!--    </div>-->


<!--    <template>-->

<!--        <el-select v-model="value" multiple placeholder="Select" style="width: 240px">-->
<!--            <el-option-->
<!--                v-for="item in colors"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            >-->
<!--                <div class="flex items-center">-->
<!--                    <el-tag :color="item.value" style="margin-right: 8px" size="small" />-->
<!--                    <span :style="{ color: item.value }">{{ item.label }}</span>-->
<!--                </div>-->
<!--            </el-option>-->
<!--            <template #tag>-->
<!--                <el-tag v-for="color in value" :key="color.value" :color="color" />-->
<!--            </template>-->
<!--        </el-select>-->

<!--    </template>-->

<!--    <script lang="ts" setup>-->
<!--        import { ref } from 'vue'-->

<!--        const value = ref([])-->
<!--        const colors = [-->
<!--            {-->
<!--                value: '#E63415',-->
<!--                label: 'red',-->
<!--            },-->
<!--            {-->
<!--                value: '#FF6600',-->
<!--                label: 'orange',-->
<!--            },-->
<!--            {-->
<!--                value: '#FFDE0A',-->
<!--                label: 'yellow',-->
<!--            },-->
<!--            {-->
<!--                value: '#1EC79D',-->
<!--                label: 'green',-->
<!--            },-->
<!--            {-->
<!--                value: '#14CCCC',-->
<!--                label: 'cyan',-->
<!--            },-->
<!--            {-->
<!--                value: '#4167F0',-->
<!--                label: 'blue',-->
<!--            },-->
<!--            {-->
<!--                value: '#6222C9',-->
<!--                label: 'purple',-->
<!--            },-->
<!--        ]-->
<!--        colors.forEach((color) => {-->
<!--            value.value.push(color.value)-->
<!--        })-->
<!--    </script>-->

<!--    <style scoped>-->
<!--        .el-tag {-->
<!--            border: none;-->
<!--            aspect-ratio: 1;-->
<!--        }-->
<!--    </style>-->


    <!--    <template>-->


<!--        <el-select-->
<!--            v-model="value"-->
<!--            multiple-->
<!--            filterable-->
<!--            allow-create-->
<!--            default-first-option-->
<!--            :reserve-keyword="false"-->
<!--            placeholder="Choose tags for your article"-->
<!--            style="width: 240px"-->
<!--        >-->
<!--            <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            />-->
<!--        </el-select>-->


<!--    </template>-->

<!--    <script lang="ts" setup>-->
<!--        import { ref } from 'vue'-->

<!--        const value = ref<string[]>([])-->
<!--        const options = [-->
<!--            {-->
<!--                value: 'HTML',-->
<!--                label: 'HTML',-->
<!--            },-->
<!--            {-->
<!--                value: 'CSS',-->
<!--                label: 'CSS',-->
<!--            },-->
<!--            {-->
<!--                value: 'JavaScript',-->
<!--                label: 'JavaScript',-->
<!--            },-->
<!--        ]-->
<!--    </script>-->


    <br/>
    <br/>


    <div style="width: 500px">
        <el-slider v-model="size"/>
        <el-space direction="vertical" wrap :size="size">
            <el-card v-for="i in 2" :key="i" class="box-card" style="width: 250px">
                <template #header>
                    <div class="card-header">
                        <span>Card name</span>
                        <el-button class="button" text>Operation button</el-button>
                    </div>
                </template>
                <div v-for="o in 4" :key="o" class="text item">
                    {{ 'List item ' + o }}
                </div>
            </el-card>
        </el-space>
    </div>

</template>

<style scoped>

.my-tagbuttons-group > .my-tagbuttons-ele:not(:first-child):not(:last-child) {
    border-radius: 0;
//border-left-color: rgba(255,255,255,0.5); //border-right-color: rgba(255,255,255,0.5); cursor: pointer;
}

.my-tagbuttons-group > .my-tagbuttons-ele:not(:last-child) {
    margin-right: -1px;
}

.my-tagbuttons-group > .my-tagbuttons-ele:not(:first-child) {
    background-color: #f5f7fa;
}

.my-tagbuttons-group > .my-tagbuttons-ele:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: rgba(255, 255, 255, 0.5);
//cursor: text; -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    padding: 0px 9px;
    font-weight: 600;
}

.my-tagbuttons-group > .my-tagbuttons-ele:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
//border-left-color: #a0cfff;
}

.my-tagbuttons-group > .my-tagbuttons-ele:not(:first-child):hover {
    background-color: var(--tagbuttons-group-color-bg-color-hover-default);
    /*background-color: #ece7e1;*/
    /*color: #ffffff;*/

}

.my-tagbuttons-group > .my-tagbuttons-ele:not(:first-child):active {
    background-color: var(--tagbuttons-group-color-bg-color-active-default);
    /*background-color: #beae98;*/
    /*color: #ffffff;*/
}

.my-tagbuttons-ele {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
//cursor: pointer; color: var(--tagbuttons-group-color-text-color-default);
    /*color: #cc5512;*/
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    transition: .1s;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    --el-button-bg-color: #ffffff;
    background-color: var(--tagbuttons-group-color-bg-color-normal-default);
    /*background-color: #f9f4eb;*/
    border: var(--el-border);
//border-color: var(--el-button-border-color); border-color: var(--tagbuttons-group-color-border-color-default);
    /*border-color: #d9cfc1;*/
    border-radius: 3px;
    padding: 0 9px;
    height: 24px;
    z-index: 2;
    /*font-weight: 600;*/
    /*border: none;*/



    --tagbuttons-group-color-bg-color-hover-group1: #ece7e1;
    --tagbuttons-group-color-bg-color-active-group1: #beae98;
    --tagbuttons-group-color-bg-color-normal-group1: #f9f4eb;
    --tagbuttons-group-color-text-color-group1: #cc5512;
    --tagbuttons-group-color-text-color-lighter1-group1: #d98152;
    --tagbuttons-group-color-border-color-group1: #d9cfc1;

    --tagbuttons-group-color-bg-color-hover-group2: #e4ece1;
    --tagbuttons-group-color-bg-color-active-group2: #9cbe98;
    --tagbuttons-group-color-bg-color-normal-group2: #f0f9eb;
    --tagbuttons-group-color-text-color-group2: #459d15;
    --tagbuttons-group-color-text-color-lighter1-group2: #7ea16a;
    --tagbuttons-group-color-border-color-group2: #cad9c1;

    --tagbuttons-group-color-bg-color-hover-group3: #d9e4e7;
    --tagbuttons-group-color-bg-color-active-group3: #a0c3cb;
    --tagbuttons-group-color-bg-color-normal-group3: #e9f7fa;
    --tagbuttons-group-color-text-color-group3: #15849d;
    --tagbuttons-group-color-text-color-lighter1-group3: #53c1da;
    --tagbuttons-group-color-border-color-group3: #cadbe0;

    /*--tagbuttons-group-color-bg-color-hover-default:var(--tagbuttons-group-color-bg-color-hover-group2);*/
    /*--tagbuttons-group-color-bg-color-active-default:var(--tagbuttons-group-color-bg-color-active-group2);*/
    /*--tagbuttons-group-color-bg-color-normal-default:var(--tagbuttons-group-color-bg-color-normal-group2);*/
    /*--tagbuttons-group-color-text-color-default:var(--tagbuttons-group-color-text-color-group2);*/
    /*--tagbuttons-group-color-border-color-default:var(--tagbuttons-group-color-border-color-group2);*/

    --tagbuttons-group-color-bg-color-hover-default: var(--tagbuttons-group-color-bg-color-hover-group2);
    --tagbuttons-group-color-bg-color-active-default: var(--tagbuttons-group-color-bg-color-active-group2);
    --tagbuttons-group-color-bg-color-normal-default: var(--tagbuttons-group-color-bg-color-normal-group2);
    --tagbuttons-group-color-text-color-default: var(--tagbuttons-group-color-text-color-group2);
    --tagbuttons-group-color-border-color-default: var(--tagbuttons-group-color-border-color-group2);
    --tagbuttons-group-color-text-color-lighter1-default:var(--tagbuttons-group-color-text-color-lighter1-group2)
}

.my-tagbuttons-ele.tag-single {
    font-weight: 600;
}

.my-tagbuttons-ele.stickTop {
    border-top: none;
    top: -1px;
    position: relative;
    padding: 0 5px;
}

.stickTop:not(:first-child):not(:last-child) {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.stickTop:first-child {
    border-top-right-radius: 0;
}

.stickTop:last-child {
    border-top-left-radius: 0;
}

.my-tagbuttons-ele.tag-single.small {
    --tagbuttons-group-color-text-color-default: var(--tagbuttons-group-color-text-color-lighter1-group2);
    z-index: 1;
    height: 20px;
    font-weight: 550;
    padding: 0 9px;
}

.my-tagbuttons-ele.button-single {
    height: 20px;
    font-weight: 550;
    background-color: #f5f7fa;
}

.my-tagbuttons-ele.button-single:hover {
    background-color: var(--tagbuttons-group-color-bg-color-hover-default);
}

.my-tagbuttons-ele.button-single:active {
    background-color: var(--tagbuttons-group-color-bg-color-active-default);
}

.stickTop:first-child {

}

.stickTop:last-child {

}
</style>